<template>
  <div :class="['container', gray ? 'gray' : '']" @click="gray = !gray">
    <!-- 顶部区域 -->
    <div class="top-box">
      <!-- banner -->
      <div class="banner-box">
        <img
          src="https://ssl-pubpic.51yund.com/1311313604.png"
          class="banner-img"
        />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      gray: false,
    }
  },
  created() {},
  mounted() {},
  methods: {},
}
</script>

<style lang="less" scoped>
.gray {
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  filter: gray;
}
.container {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  height: 100vh;
  overflow: hidden;
  user-select: none;
  background-image: linear-gradient(180deg, #7ccff1 61%, #0a8233 100%);

  .top-box {
    width: 100%;
    .banner-box {
      .banner-img {
        width: 100%;
      }
    }
  }
}
</style>
